import {
  Component, OnInit, Input, ChangeDetectorRef, Inject
}from '@angular/core';

import { DIMENSION, Dimension, Coord } from '../models/dimension';

export interface IMinoProps {
  color: string;
  coord: Coord;
}

@Component({
  moduleId: module.id,
  selector: 'th-mino',
  templateUrl: 'mino.cmp.html',
  styleUrls: ['mino.cmp.css']
})
export class MinoCmp {
  color: string;
  coord: Coord;
  @Input() set props(props: IMinoProps) {
    this.color = props.color;
    this.coord = props.coord;
  }

  private get style() {
    return {
      left: this.coord[0] * 100 / this.dim[0] + '%',
      top: this.coord[1] * 100 / this.dim[1] + '%',
      width: 100 / this.dim[0] + '%',
      height: 100 / this.dim[1] + '%',
      backgroundColor: this.color
    }
  }

  constructor(    
    @Inject(DIMENSION) private dim: Dimension
  ) { }

}